<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    title="操作记录"
    class="dialog-sm"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <table
        class="table table-bordered table-sm history-table"
        v-for="item in tableData"
        :key="item.id"
      >
        <colgroup>
          <col width="20%" />
          <col width="25%" />
          <col width="25%" />
          <col width="30%" />
        </colgroup>
        <tbody>
          <tr>
            <td class="bg-light text-muted">操作时间</td>
            <td>{{ item.create_time }}</td>
            <td class="bg-light text-muted">操作人</td>
            <td>{{ item.submit_person_name }}</td>
          </tr>
          <template v-if="item.typeUpdate.length">
            <tr>
              <td colspan="4" class="font-weight-bold">修改：</td>
            </tr>
            <tr class="bg-light text-muted">
              <td>序号</td>
              <td>修改字段</td>
              <td>修改前内容</td>
              <td>修改后内容</td>
            </tr>
            <tr v-for="(updateItem, index) of item.typeUpdate" :key="updateItem.id">
              <td>{{ index + 1 }}</td>
              <td>{{ updateItem.label }}</td>
              <td>{{ updateItem.oldVal }}</td>
              <td>{{ updateItem.newVal }}</td>
            </tr>
          </template>
          <template v-if="item.typeCreate.length">
            <tr>
              <td colspan="4" class="font-weight-bold">新增：</td>
            </tr>
            <tr class="bg-light text-muted">
              <td>序号</td>
              <td>类型</td>
              <td>名称</td>
              <td>新增时间</td>
            </tr>
            <tr v-for="(createItem, index) of item.typeCreate" :key="createItem.id">
              <td>{{ index + 1 }}</td>
              <td>{{ createItem.label }}</td>
              <td>{{ createItem.newVal }}</td>
              <td>{{ createItem.createTime }}</td>
            </tr>
          </template>
          <template v-if="item.typeDelete.length">
            <tr>
              <td colspan="4" class="font-weight-bold">删除：</td>
            </tr>
            <tr class="bg-light text-muted">
              <td>序号</td>
              <td>类型</td>
              <td>名称</td>
              <td>新增时间</td>
            </tr>
            <tr v-for="(deleteItem, index) of item.typeDelete" :key="deleteItem.id">
              <td>{{ index + 1 }}</td>
              <td>{{ deleteItem.label }}</td>
              <td>{{ deleteItem.newVal }}</td>
              <td>{{ deleteItem.createTime }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>

    <div class="empty-wrap mb-3" v-if="!loading && !tableData.length">暂无记录</div>

    <div class="d-flex justify-content-between">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { stringFileName } from '@vimi/utils-tool'
import { getHistory } from '@/credit/views/city/archives/historyMixins'

export default {
  components: {},
  props: {
    visible: Boolean,
    historyId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
        subKey: 'update_record_detail.update_record_id',
      },
      order: {
        create_time: 'desc',
      },
      tableData: [],
      tableCount: 0,
    }
  },
  computed: {},
  watch: {
    visible: {
      handler: function (val) {
        if (!val) {
          return
        }
        const { historyId } = this
        if (historyId) {
          this.params['record_id.eq'] = historyId
          this.getData()
        } else {
          this.tableData = []
          this.tableCount = 0
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },

    getData(index = 1) {
      this.params.index = index
      this.loading = true
      return getHistory(this.params, this.order)
        .then(res => {
          this.tableData = res.data.map(this.dataAdapter)
          this.tableCount = res.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      const details = item.update_record_detail || []
      item.typeUpdate = []
      item.typeCreate = []
      item.typeDelete = []

      const getCreateAndDeleteItem = detail => ({
        id: detail.update_record_detail_id,
        createTime: detail.create_time,
        label: detail.update_record_field_name,
        newVal:
          detail.update_record_field === 'attachment'
            ? stringFileName(detail.update_record_value_aft)
            : detail.update_record_value_aft,
        originVal: detail.update_record_value_aft,
      })

      for (const detail of details) {
        const type = +(detail.update_type || 1)
        switch (type) {
          case 1:
            item.typeUpdate.push({
              id: detail.update_record_detail_id,
              label: detail.update_record_field_name,
              oldVal: detail.update_record_value_bef,
              newVal: detail.update_record_value_aft,
            })
            break
          case 2:
            item.typeCreate.push(getCreateAndDeleteItem(detail))
            break
          case 3:
            item.typeDelete.push(getCreateAndDeleteItem(detail))
            break
          default:
            break
        }
      }

      return item
    },
  },
}
</script>

<style lang="scss" scoped>
.history-table {
  outline: 1px solid #999;
}
</style>
